<template>
    <div class="today-pai">
        <div class="today-contain">
            <h2 class="today-title">今日精选</h2>
            <router-link to="/pai/more" tag="a" class="art-more">更多</router-link>
            <div class="J_TrailerList clearfix">
                <ul class="item-con album-item-con clearfix">

                    <li class="album-list-li shadow">
                        <div class="album-content clearfix">
                            <div class="pic-column">
                                <a href="javascript:;" target="_blank">
                                    <img alt="一元起拍名家捡漏书画专场" class="album-img"
                                         src="https://img.alicdn.com/bao/uploaded/i3/O1CN01fxatPq1OrCqpadAdR_!!0-paimai.jpg_600x600q90">
                                </a>
                            </div>
                            <div class="info-column">
                                <div class="wrap">
                                    <h2><a href="javascript:;" target="_blank">一元起拍名家捡漏书画专场</a>
                                    </h2>
                                    <div class="aulbum-date">10.31/00:00-11.01/00:00</div>
                                    <div class="aulbum-desc">
                                        共<em>20</em>个拍品 <em class="bid-cnt">25</em>人参拍
                                    </div>
                                </div>
                                <ul class="auction-pic-list-ul clearfix">


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i2/O1CN01v8n3KJ1OrCqoAOaxw_!!0-paimai.jpg_150x150q90" alt="">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606408497161">701</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01V8VjT51OrCqaZFzCJ_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606275464213">501</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i2/O1CN01vdJ1ZM1OrCqeiMjqn_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606528669119">801</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01jyj4gQ1OrCqoLuMMu_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606465297728">201</span>
                                            </p>
                                        </a>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </li>

                    <li class="album-list-li shadow">
                        <div class="album-content clearfix">
                            <div class="pic-column">
                                <a href="javascript:;" target="_blank"
                                   >
                                    <img alt="一元起拍名家捡漏书画专场" class="album-img"
                                         src="https://img.alicdn.com/bao/uploaded/i3/O1CN01NwX73J1OrCqvMGwg2_!!0-paimai.jpg_600x600q90">
                                </a>
                            </div>
                            <div class="info-column">
                                <div class="wrap">
                                    <h2><a href="javascript:;" target="_blank"
                                           >一元起拍名家捡漏书画专场</a></h2>
                                    <div class="aulbum-date">10.31/00:00-11.01/00:00</div>
                                    <div class="aulbum-desc">
                                        共<em>18</em>个拍品 <em class="bid-cnt">18</em>人参拍
                                    </div>
                                </div>
                                <ul class="auction-pic-list-ul clearfix">


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01Alv1ny1OrCqusD9sp_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606920254801">601</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01zcfJEj1OrCqoRjQbK_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606689929032">201</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i3/O1CN016cqgZ01OrCqhbmv1o_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606435768485">401</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01rWVETA1OrCqj0ovxc_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606436072253">201</span>
                                            </p>
                                        </a>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </li>

                    <li class="album-list-li shadow">
                        <div class="album-content clearfix">
                            <div class="pic-column">
                                <a href="javascript:;" target="_blank"
                                   >
                                    <img alt="大道至真名家一元无底价保真精品专场" class="album-img"
                                         src="https://img.alicdn.com/bao/uploaded/i4/O1CN01wx9AMC2HjEofgHbGc_!!0-paimai.jpg_600x600q90">
                                </a>
                            </div>
                            <div class="info-column">
                                <div class="wrap">
                                    <h2><a href="javascript:;" target="_blank"
                                           >大道至真名家一元无底价保真精品专场</a></h2>
                                    <div class="aulbum-date">10.31/00:00-11.01/00:00</div>
                                    <div class="aulbum-desc">
                                        共<em>15</em>个拍品 <em class="bid-cnt">17</em>人参拍
                                    </div>
                                </div>
                                <ul class="auction-pic-list-ul clearfix">


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i3/O1CN01ckD5cS2HjEozNKpOf_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_603745992069">201</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/TB2yhaTFf9TBuNjy1zbXXXpepXa_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_602687485378">401</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i4/O1CN01MwwLXD2HjEoxmHEBT_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_603980453597">401</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/2980019186/TB2sPpcnQOWBuNjSsppXXXPgpXa_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_603228630008">401</span>
                                            </p>
                                        </a>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </li>

                    <li class="album-list-li shadow">
                        <div class="album-content clearfix">
                            <div class="pic-column">
                                <a href="javascript:;" target="_blank"
                                   >
                                    <img alt="朝鲜艺术专场" class="album-img"
                                         src="https://img.alicdn.com/bao/uploaded/i2/O1CN01iTdVrF1gdcBLNuGDq_!!0-paimai.jpg_600x600q90">
                                </a>
                            </div>
                            <div class="info-column">
                                <div class="wrap">
                                    <h2><a href="javascript:;" target="_blank"
                                           >朝鲜艺术专场</a></h2>
                                    <div class="aulbum-date">10.31/00:00-11.01/00:00</div>
                                    <div class="aulbum-desc">
                                        共<em>10</em>个拍品 <em class="bid-cnt">0</em>人参拍
                                    </div>
                                </div>
                                <ul class="auction-pic-list-ul clearfix">


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i3/O1CN01ZBBMA81gdcBOS6VfZ_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606504396889">2800</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i2/O1CN01uRIilS1gdcBNEs9Va_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606630549115">750</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN01FpYtmE1gdc6pwwDJQ_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_606927455674">1600</span>
                                            </p>
                                        </a>
                                    </li>


                                    <li class="auction-pic-list-li">
                                        <a href="javascript:;" target="_blank"
                                           >
                                            <img src="https://img.alicdn.com/bao/uploaded/i2/O1CN01Th5GHq1gdcB0qbhyZ_!!0-paimai.jpg_150x150q90">
                                            <p class="img-desc w-b opacity60">
                                                <span class="sign">¥</span>
                                                <span id="J_Item_607197923266">3800</span>
                                            </p>
                                        </a>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TodayPai",
        data() {
            return {
                /*今日拍卖数据*/
                todayPaiData: [
                    {
                        bigPic: "", url: "", title: "", date: "", total: "", sum: "", smallPic: [
                            {url: "", price: ""},
                            {url: "", price: ""},
                            {url: "", price: ""},
                        ]
                    },
                ],
            }
        }
    }
</script>

<style lang="less" scoped>
    * {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    a {
        color: #666;
        text-decoration: none;
    }

    .today-pai {
        width: 100%;

        .today-contain {
            width: 1200px;
            height: 100%;
            margin: auto;
            position: relative;

            /*标题*/

            .today-title {
                margin-bottom: 17px;
                color: #333;
                font: 700 20px/36px 'Microsoft YaHei';
                border-bottom: 1px solid #e8e8e8;
            }

            /*更多 按钮*/

            .art-more {
                position: absolute;
                top: 11px;
                right: 0;
                color: #333;
            }

            .art-more:hover {
                text-decoration: underline;
            }

            /*Item*/

            .clearfix {
                ul.item-con {
                    margin-bottom: 10px;
                    position: relative;

                    li.album-list-li {
                        margin-bottom: 20px;
                        overflow: hidden;

                        .pic-column {
                            width: 525px;
                            height: 220px;
                            float: left;
                            overflow: hidden;

                            img {
                                width: 520px;
                                height: 220px;
                            }
                        }

                        .info-column {
                            overflow: hidden;
                            float: left;

                            .wrap {
                                color: #666;
                                margin-left: 18px;
                                margin-top: 10px;

                                h2 {
                                    a {
                                        color: #666;
                                        font-weight: bolder;
                                        font-family: SimSun, serif;
                                        font-size: 14px;
                                        margin-top: 10px;
                                        margin-bottom: 2px;
                                    }

                                    a:hover {
                                        text-decoration: underline;
                                    }
                                }

                                .aulbum-date {
                                    font-size: 12px;
                                    margin-top: 5px;
                                    margin-bottom: 5px;
                                }

                                .aulbum-desc {
                                    width: 390px;
                                    overflow: hidden;

                                    em {
                                        color: #f40;
                                        font-weight: 700;
                                    }

                                    .bid-cnt {
                                        margin-left: 10px;
                                    }
                                }
                            }

                            .auction-pic-list-ul {
                                margin-top: 7px;
                                overflow: hidden;

                                li.auction-pic-list-li {
                                    display: inline;
                                    float: left;
                                    position: relative;
                                    width: 135px;
                                    height: 135px;
                                    margin-left: 12px;
                                    z-index: 1;

                                    a {
                                        img {
                                            width: 135px;
                                            height: 135px;
                                        }
                                    }

                                    .img-desc {
                                        width: 100%;
                                        height: 20px;
                                        line-height: 20px;
                                        position: absolute;
                                        bottom: 0;
                                        left: 0;
                                        color: #fff;
                                        overflow: hidden;
                                        font-size: 12px;
                                        z-index: 2;

                                        .sign {
                                            margin-left: 5px;
                                        }
                                    }

                                    .opacity60 {
                                        background: rgba(0, 0, 0, .6);
                                        zoom: 1;
                                    }

                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>